<template>
  <div class="quotation-form">
    <!-- 头部信息 -->
    <div class="header">
      <div class="item">
        <label>申请单号</label>
        <el-input v-model="headerData.申请单号" :value="headerData.申请单号" size="small" />
      </div>
      <div class="item">
        <label>申请据点</label>
        <el-input v-model="headerData.申请据点" :value="headerData.申请据点" size="small" />
      </div>
      <div class="item">
        <label>单据日期</label>
        <el-date-picker
          v-model="headerData.单据日期"
          type="date"
          :value="headerData.单据日期"
          size="small"
          placeholder="选择日期"
        />
      </div>
      <div class="item">
        <label>目的据点</label>
        <el-input v-model="headerData.目的据点" :value="headerData.目的据点" size="small" />
      </div>
      <div class="item status">
        <label>状态</label>
        <el-select v-model="headerData.状态" :value="headerData.状态" size="small" placeholder="请选择">
          <el-option
            v-for="option in headerData.状态选项"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </div>
    </div>

    <!-- 标签页 -->
    <div class="tabs">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: tab.active }"
        @click="setActiveTab(index)"
      >
        {{ tab.name }}
      </button>
    </div>

    <!-- 产品资料区 -->
    <div class="grid-section">
      <!-- 产品资料一 (60%) -->
      <div class="column column-60">
        <h3 style="color: #1F77B4; font-size: 12px; font-weight: 600; border-bottom: 1px solid #eee;">产品资料一</h3>
        <div class="form-group">
          <div class="item">
            <label>机型</label>
            <el-input v-model="productData1.机型" :value="productData1.机型" size="small" />
          </div>
          <div class="item">
            <label>主要物料</label>
            <el-input v-model="productData1.主要物料" :value="productData1.主要物料" size="small" />
          </div>
          <div class="item">
            <label>物料描述</label>
            <el-input v-model="productData1.物料描述" :value="productData1.物料描述" size="small" />
          </div>
          <div class="item">
            <label>物料规格</label>
            <el-input v-model="productData1.物料规格" :value="productData1.物料规格" size="small" />
          </div>
          <div class="item">
            <label>产品长度</label>
            <el-input v-model="productData1.产品长度" :value="productData1.产品长度" size="small" />
          </div>
          <div class="item">
            <label>产品宽度</label>
            <el-input v-model="productData1.产品宽度" :value="productData1.产品宽度" size="small" />
          </div>
          <div class="item">
            <label>产品规格</label>
            <el-input v-model="productData1.产品规格" :value="productData1.产品规格" size="small" />
          </div>
          <div class="item">
            <label>产品品名</label>
            <el-input v-model="productData1.产品品名" :value="productData1.产品品名" size="small" />
          </div>
          <div class="item">
            <label>报价工序</label>
            <el-select v-model="productData1.报价工序" :value="productData1.报价工序" size="small" placeholder="请选择">
              <el-option
                v-for="option in productData1.报价工序选项"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
          <div class="item">
            <label>客户代码</label>
            <el-input v-model="productData1.客户代码" :value="productData1.客户代码" size="small" />
            <span
              class="client-name"
              :title="productData1.客户名称"
            >{{ productData1.客户名称 }}</span>
          </div>
          <div class="item">
            <label>客户货号</label>
            <el-input v-model="productData1.客户货号" :value="productData1.客户货号" size="small" />
          </div>
          <!-- 申请信息 -->
          <div class="item">
            <label>需求日期</label>
            <el-date-picker
              v-model="productData1.需求日期"
              type="datetime"
              :value="productData1.需求日期"
              size="small"
              placeholder="选择日期时间"
            />
          </div>
          <div class="item">
            <label>申请人员</label>
            <el-input v-model="productData1.申请人员" :value="productData1.申请人员" size="small" />
            <span class="user-name">{{ productData1.申请人员姓名 }}</span>
          </div>
          <div class="item">
            <label>申请时间</label>
            <el-input v-model="productData1.申请时间" :value="productData1.申请时间" size="small" />
          </div>
          <div class="item">
            <label>备注</label>
            <el-input
              v-model="productData1.备注"
              type="textarea"
              :value="productData1.备注"
              :rows="2"
              size="small"
            />
          </div>
          <div class="item">
            <label>终端货号</label>
            <el-input v-model="productData1.终端货号" :value="productData1.终端货号" size="small" />
          </div>
          <div class="item upload">
            <el-button size="small" type="primary" plain>上传图片</el-button>
            <el-button size="small" type="primary" plain>显示图片</el-button>
          </div>
        </div>
      </div>

      <!-- 产品资料二 (40%) -->
      <div class="column column-40">
        <div class="form-group product-section">
          <h3>产品资料二</h3>
          <div class="item">
            <label>报价日期</label>
            <el-date-picker
              v-model="productData2.报价日期"
              type="date"
              :value="productData2.报价日期"
              size="small"
              placeholder="选择日期"
            />
          </div>
          <div class="item">
            <label>工程不良率</label>
            <el-input v-model="productData2.工程不良率" :value="productData2.工程不良率" size="small" />
          </div>
          <div class="item">
            <label>报价工程师</label>
            <el-input v-model="productData2.报价工程师" :value="productData2.报价工程师" size="small" />
            <span class="eng-name">{{ productData2.报价工程师姓名 }}</span>
          </div>
          <div class="item">
            <label>参考产能</label>
            <el-input v-model="productData2.参考产能" :value="productData2.参考产能" size="small" />
          </div>
          <div class="item">
            <label>模具费用</label>
            <el-input v-model="productData2.模具费用" :value="productData2.模具费用" size="small" />
          </div>
          <div class="item">
            <label>模具寿命(万/模)</label>
            <el-input v-model="productData2.模具寿命" :value="productData2.模具寿命" size="small" />
          </div>
          <div class="item">
            <label>工艺描述</label>
            <el-select v-model="productData2.工艺描述" :value="productData2.工艺描述" size="small" placeholder="请选择">
              <el-option
                v-for="option in productData2.工艺描述选项"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
          <div class="item">
            <label>料件宽度</label>
            <el-input v-model="productData2.料件宽度" :value="productData2.料件宽度" size="small" />
          </div>
          <div class="item">
            <label>模具</label>
            <el-select v-model="productData2.模具" :value="productData2.模具" size="small" placeholder="请选择">
              <el-option
                v-for="option in productData2.模具选项"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
          <div class="item">
            <label>单条穴数</label>
            <el-input v-model="productData2.单条穴数" :value="productData2.单条穴数" size="small" />
          </div>
          <div class="item">
            <label>报价依据</label>
            <el-select v-model="productData2.报价依据" :value="productData2.报价依据" size="small" placeholder="请选择">
              <el-option
                v-for="option in productData2.报价依据选项"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
          <div class="item">
            <label>设计标准</label>
            <el-input v-model="productData2.设计标准" :value="productData2.设计标准" size="small" />
          </div>
          <div class="item">
            <label>排版方式</label>
            <el-select v-model="productData2.排版方式" :value="productData2.排版方式" size="small" placeholder="请选择">
              <el-option
                v-for="option in productData2.排版方式选项"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
          <div class="item">
            <label>调机米数</label>
            <el-input v-model="productData2.调机米数" :value="productData2.调机米数" size="small" />
          </div>
          <div class="item">
            <label>穴数</label>
            <el-input v-model="productData2.穴数" :value="productData2.穴数" size="small" />
          </div>
          <div class="item">
            <label>步距</label>
            <el-input v-model="productData2.步距" :value="productData2.步距" size="small" />
          </div>
          <div class="item">
            <label>模切次数</label>
            <el-input v-model="productData2.模切次数" :value="productData2.模切次数" size="small" />
          </div>
          <div class="item">
            <label>每圈数量</label>
            <el-input v-model="productData2.每圈数量" :value="productData2.每圈数量" size="small" />
          </div>
        </div>
      </div>
    </div>

    <!-- 工艺资料 & 物料维护 -->
    <div class="bottom-grid">
      <!-- 工艺资料 (40%) -->
      <div class="section section-40">
        <h3>工艺资料</h3>
        <div class="table-container" style="border-radius: 4px;">
          <div class="table-header sticky top-0 z-10">
            <div class="table-row table-head">
              <div
                class="table-cell sortable"
                v-for="col in processTableColumns"
                :key="col.key"
                :style="{ width: col.width + '%' }"
                @click="handleSort(col.key, 'process')"
              >
                {{ col.title }}
                <span class="ml-1">
                  <span
                    class="cursor-pointer hover:text-gray-300"
                    :style="{ color: sortState.field === col.key && sortState.order === 'asc' ? '#fff' : '' }"
                  >↑</span>
                  <span
                    class="cursor-pointer hover:text-gray-300"
                    :style="{ color: sortState.field === col.key && sortState.order === 'desc' ? '#fff' : '' }"
                  >↓</span>
                </span>
              </div>
            </div>
          </div>
          <div class="table-body">
            <div
              class="table-row"
              v-for="(row, index) in processTableData"
              :key="index"
              :class="getRowClass(index)"
            >
              <div class="table-cell" v-for="col in processTableColumns" :key="col.key" :style="{ width: col.width + '%' }">
                <div class="cell-content">{{ row[col.dataIndex] }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 物料维护 (60%) -->
      <div class="section section-60">
        <h3>物料维护</h3>
        <div class="table-container" style="border-radius: 4px;">
          <div class="table-header sticky top-0 z-10">
            <div class="table-row table-head">
              <div
                class="table-cell sortable"
                v-for="col in materialTableColumns"
                :key="col.key"
                :style="{ width: col.width + 'px' }"
                @click="handleSort(col.key, 'material')"
              >
                {{ col.title }}
                <span class="ml-1">
                  <span
                    class="cursor-pointer hover:text-gray-300"
                    :style="{ color: sortState.field === col.key && sortState.order === 'asc' ? '#fff' : '' }"
                  >↑</span>
                  <span
                    class="cursor-pointer hover:text-gray-300"
                    :style="{ color: sortState.field === col.key && sortState.order === 'desc' ? '#fff' : '' }"
                  >↓</span>
                </span>
              </div>
            </div>
          </div>
          <div class="table-body">
            <div
              class="table-row"
              v-for="(row, index) in materialTableData"
              :key="index"
              :class="getRowClass(index)"
            >
              <div class="table-cell" v-for="col in materialTableColumns" :key="col.key" :style="{ width: col.width + 'px' }">
                <div class="cell-content">{{ row[col.dataIndex] }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton } from 'element-plus'

// 头部信息数据
const headerData = ref({
  申请单号: "111210-2306300001",
  申请据点: "CDL11",
  单据日期: "2023-08-01",
  目的据点: "CDL11",
  状态: "已审核",
  状态选项: [
    { label: "已审核", value: "已审核" },
    { label: "待审核", value: "待审核" }
  ]
})

// 标签页数据
const tabs = ref([
  { name: "基本数据", active: true },
  { name: "异动资讯", active: false }
])

// 设置活动标签页
const setActiveTab = (index) => {
  tabs.value.forEach((tab, i) => {
    tab.active = i === index
  })
}

// 产品资料一数据
const productData1 = ref({
  机型: "KM4/CM4",
  主要物料: "",
  物料描述: "TESA 66824+LINER 0.08T",
  物料规格: "",
  产品长度: "19.15",
  产品宽度: "3.40",
  产品规格: "19.15mm*3.40mm",
  产品品名: "装饰件背胶",
  报价工序: "1:成品",
  报价工序选项: [
    { label: "1:成品", value: "1:成品" }
  ],
  客户代码: "100125",
  客户名称: "富联裕展科技（深圳）有限公司",
  客户货号: "2T54QQG00VBX",
  需求日期: "2023-08-01T15:00:37",
  申请人员: "108182",
  申请人员姓名: "宁海涛",
  申请时间: "15:00:37",
  备注: "裕展客户备料取数报价",
  终端货号: "G806-10473-00"
})

// 产品资料二数据
const productData2 = ref({
  报价日期: "2023-08-01",
  工程不良率: "8.000%",
  报价工程师: "304646",
  报价工程师姓名: "黄建参",
  参考产能: "399.300",
  模具费用: "1,600.00",
  模具寿命: "10.000",
  工艺描述: "5:套孔模切4次",
  工艺描述选项: [
    { label: "5:套孔模切4次", value: "5:套孔模切4次" }
  ],
  料件宽度: "",
  模具: "2:雕刻模具",
  模具选项: [
    { label: "2:雕刻模具", value: "2:雕刻模具" }
  ],
  单条穴数: "",
  报价依据: "",
  报价依据选项: [],
  设计标准: "",
  排版方式: "",
  排版方式选项: [],
  调机米数: "",
  穴数: "3",
  步距: "21.0000",
  模切次数: "",
  每圈数量: ""
})

// 工艺资料表格列定义
const processTableColumns = [
  { key: 'processItem', dataIndex: 'processItem', title: '工艺项目', width: 33.33 },
  { key: 'unitCapacity', dataIndex: 'unitCapacity', title: '单位产能/H', width: 33.33 },
  { key: 'personnel', dataIndex: 'personnel', title: '耗用人数/H', width: 33.33 }
]

// 物料维护表格列定义
const materialTableColumns = [
  { key: 'index', dataIndex: 'index', title: '项次', width: 60 },
  { key: 'materialUsage', dataIndex: 'materialUsage', title: '材料用途', width: 80 },
  { key: 'materialCode', dataIndex: 'materialCode', title: '物料编号', width: 100 },
  { key: 'materialName', dataIndex: 'materialName', title: '物料名称', width: 130 },
  { key: 'originalWidth', dataIndex: 'originalWidth', title: '原始宽度(MM)', width: 100 },
  { key: 'usedWidth', dataIndex: 'usedWidth', title: '用料宽度(MM)', width: 100 },
  { key: 'dosage', dataIndex: 'dosage', title: '用量(份)', width: 70 },
  { key: 'remaining', dataIndex: 'remaining', title: '剩余量/卷(MM)', width: 100 },
  { key: 'pcs', dataIndex: 'pcs', title: '每米生产数量(PCS)', width: 120 },
  { key: 'remark', dataIndex: 'remark', title: '备注', width: 80 },
  { key: 'materialRemark1', dataIndex: 'materialRemark1', title: '材料备注1', width: 80 },
  { key: 'materialRemark2', dataIndex: 'materialRemark2', title: '材料备注2', width: 80 }
]

// 工艺资料表格数据
const processTableData = ref([
  { processItem: '1:开料(米)', unitCapacity: '0.000', personnel: '2.000' },
  { processItem: '10:包装检验(PCS)', unitCapacity: '2,000.000', personnel: '1.000' },
  { processItem: '3:模切(PCS/米)', unitCapacity: '9,000.000', personnel: '4.000' }
])

// 物料维护表格数据
const materialTableData = ref([
  { index: 1, materialUsage: '2:主材', materialCode: '104000415', materialName: 'TESA66824', originalWidth: '940.00', usedWidth: '26.000', dosage: '1.000', remaining: '4.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 2, materialUsage: '1:面材', materialCode: 'MISC', materialName: 'QSP755H1B', originalWidth: '0.00', usedWidth: '90.000', dosage: '1.000', remaining: '10.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 3, materialUsage: '5:垫底', materialCode: '101000450', materialName: 'DA75T6单层亚克力保护膜', originalWidth: '1,240.00', usedWidth: '70.000', dosage: '1.000', remaining: '50.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 4, materialUsage: '8:排废', materialCode: '104000073', materialName: 'DYT-3275G', originalWidth: '1,050.00', usedWidth: '40.000', dosage: '1.000', remaining: '10.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 5, materialUsage: '6:过程', materialCode: '106000713', materialName: 'JP311A白色PET离型膜', originalWidth: '1,020.00', usedWidth: '40.000', dosage: '3.000', remaining: '20.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 6, materialUsage: '8:排废', materialCode: '104000713', materialName: 'DYT-3275G', originalWidth: '1,050.00', usedWidth: '4.000', dosage: '4.000', remaining: '2.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 7, materialUsage: '8:排废', materialCode: '101000202', materialName: '排废胶', originalWidth: '1,090.00', usedWidth: '30.000', dosage: '1.000', remaining: '10.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 8, materialUsage: '8:排废', materialCode: '104000157', materialName: '黄色透明胶（加厚）', originalWidth: '1,260.00', usedWidth: '30.000', dosage: '1.000', remaining: '0.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 9, materialUsage: '3:底材', materialCode: '106000170', materialName: 'JP-510W', originalWidth: '1,000.00', usedWidth: '60.000', dosage: '1.000', remaining: '30.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 10, materialUsage: '4:保护', materialCode: '106000163', materialName: '62g白格单面轻离型纸', originalWidth: '1,090.00', usedWidth: '50.000', dosage: '1.000', remaining: '40.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
  { index: 11, materialUsage: '6:过程', materialCode: '104000713', materialName: 'DYT-3275G', originalWidth: '1,050.00', usedWidth: '7.000', dosage: '2.000', remaining: '0.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' }
])

// 排序状态
const sortState = reactive({
  field: '',
  order: '' // 'asc' 或 'desc' 或 ''
})

// 处理排序
const handleSort = (field, tableType) => {
  // 如果点击的是当前排序字段，则切换排序方式
  if (sortState.field === field) {
    if (sortState.order === '') {
      sortState.order = 'asc'
    } else if (sortState.order === 'asc') {
      sortState.order = 'desc'
    } else {
      sortState.order = ''
    }
  } else {
    // 点击新字段，默认升序
    sortState.field = field
    sortState.order = 'asc'
  }

  // 根据表格类型对相应的数据进行排序
  if (tableType === 'process' && sortState.field) {
    if (sortState.order === '') {
      // 恢复默认顺序
      processTableData.value = [
        { processItem: '1:开料(米)', unitCapacity: '0.000', personnel: '2.000' },
        { processItem: '10:包装检验(PCS)', unitCapacity: '2,000.000', personnel: '1.000' },
        { processItem: '3:模切(PCS/米)', unitCapacity: '9,000.000', personnel: '4.000' }
      ]
    } else {
      processTableData.value.sort((a, b) => {
        const aValue = a[sortState.field]
        const bValue = b[sortState.field]

        // 处理数字字符串的比较
        const aNum = parseFloat(String(aValue).replace(/,/g, ''))
        const bNum = parseFloat(String(bValue).replace(/,/g, ''))

        if (!isNaN(aNum) && !isNaN(bNum)) {
          // 如果两个值都是数字，则按数值比较
          return sortState.order === 'asc' ? aNum - bNum : bNum - aNum
        } else {
          // 否则按字符串比较
          const comparison = String(aValue).localeCompare(String(bValue))
          return sortState.order === 'asc' ? comparison : -comparison
        }
      })
    }
  } else if (tableType === 'material' && sortState.field) {
    if (sortState.order === '') {
      // 恢复默认顺序
      materialTableData.value = [
        { index: 1, materialUsage: '2:主材', materialCode: '104000415', materialName: 'TESA66824', originalWidth: '940.00', usedWidth: '26.000', dosage: '1.000', remaining: '4.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 2, materialUsage: '1:面材', materialCode: 'MISC', materialName: 'QSP755H1B', originalWidth: '0.00', usedWidth: '90.000', dosage: '1.000', remaining: '10.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 3, materialUsage: '5:垫底', materialCode: '101000450', materialName: 'DA75T6单层亚克力保护膜', originalWidth: '1,240.00', usedWidth: '70.000', dosage: '1.000', remaining: '50.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 4, materialUsage: '8:排废', materialCode: '104000073', materialName: 'DYT-3275G', originalWidth: '1,050.00', usedWidth: '40.000', dosage: '1.000', remaining: '10.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 5, materialUsage: '6:过程', materialCode: '106000713', materialName: 'JP311A白色PET离型膜', originalWidth: '1,020.00', usedWidth: '40.000', dosage: '3.000', remaining: '20.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 6, materialUsage: '8:排废', materialCode: '104000713', materialName: 'DYT-3275G', originalWidth: '1,050.00', usedWidth: '4.000', dosage: '4.000', remaining: '2.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 7, materialUsage: '8:排废', materialCode: '101000202', materialName: '排废胶', originalWidth: '1,090.00', usedWidth: '30.000', dosage: '1.000', remaining: '10.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 8, materialUsage: '8:排废', materialCode: '104000157', materialName: '黄色透明胶（加厚）', originalWidth: '1,260.00', usedWidth: '30.000', dosage: '1.000', remaining: '0.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 9, materialUsage: '3:底材', materialCode: '106000170', materialName: 'JP-510W', originalWidth: '1,000.00', usedWidth: '60.000', dosage: '1.000', remaining: '30.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 10, materialUsage: '4:保护', materialCode: '106000163', materialName: '62g白格单面轻离型纸', originalWidth: '1,090.00', usedWidth: '50.000', dosage: '1.000', remaining: '40.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' },
        { index: 11, materialUsage: '6:过程', materialCode: '104000713', materialName: 'DYT-3275G', originalWidth: '1,050.00', usedWidth: '7.000', dosage: '2.000', remaining: '0.000', pcs: '142.857', remark: '', materialRemark1: '', materialRemark2: '' }
      ]
    } else {
      materialTableData.value.sort((a, b) => {
        const aValue = a[sortState.field]
        const bValue = b[sortState.field]

        // 处理数字字符串的比较
        const aNum = parseFloat(String(aValue).replace(/,/g, ''))
        const bNum = parseFloat(String(bValue).replace(/,/g, ''))

        if (!isNaN(aNum) && !isNaN(bNum)) {
          // 如果两个值都是数字，则按数值比较
          return sortState.order === 'asc' ? aNum - bNum : bNum - aNum
        } else {
          // 否则按字符串比较
          const comparison = String(aValue).localeCompare(String(bValue))
          return sortState.order === 'asc' ? comparison : -comparison
        }
      })
    }
  }
}

// 获取行类名
const getRowClass = (index) => {
  return index % 2 === 0 ? 'table-row-even' : 'table-row-odd';
}
</script>

<style scoped>
.quotation-form {
  font-size: 11px;
  line-height: 1.3;
  color: #333;
  padding: 8px 10px;
  background-color: #f5f5f5;
  min-width: 1000px;
  overflow-x: hidden; /* 隐藏页面底部滚动条 */
}

.header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px;
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.header .item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 150px;
}

.header label {
  font-weight: 500;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
}

/* :deep(.el-input__wrapper),
:deep(.el-select__wrapper),
:deep(.el-date-editor) {
  font-size: 11px;
  padding: 1px 3px;
  height: 16px;
  align-self: flex-start;
} */

:deep(.el-input),
:deep(.el-select),
:deep(.el-date-editor) {
  font-size: 11px;
  width: 60%;
}

:deep(.el-textarea__inner) {
  font-size: 11px;
  padding: 1px 3px;
  height: 24px;
  width: 70%;
  resize: vertical;
}

.tabs {
  display: flex;
  margin-bottom: 8px;
  border-bottom: 1px solid #d9d9d9;
}

.tabs button {
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid #d9d9d9;
  background: #fafafa;
  cursor: pointer;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  margin-right: -1px;
}

.tabs button.active {
  background: #1F77B4;
  color: white;
  border-color: #1F77B4;
}

.grid-section {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.column {
  background: white;
  padding: 4px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.column-60 {
  flex: 0 0 59.5%;
}

.column-40 {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.form-group .item {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  min-height: 24px;
}

.form-group label {
  font-weight: 500;
  font-size: 11px;
  margin-bottom: 0;
  min-width: 60px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.client-name,
.user-name,
.eng-name {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 4px;
}

/* 添加悬停显示完整内容的效果 */
.client-name {
  cursor: pointer;
  position: relative;
}

.client-name:hover::after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 2px 5px;
  border: 1px solid #ddd;
  border-radius: 2px;
  z-index: 1000;
  white-space: pre;
  font-size: 10px;
  color: #666;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 300px;
  word-break: break-all;
}

.form-group .upload {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  grid-column: span 2;
}

.form-group h3 {
  grid-column: span 2;
  margin: 1px 0;
  padding-bottom: 1px;
  border-bottom: 1px solid #eee;
  color: #1F77B4;
  font-size: 12px;
  font-weight: 600;
}

.bottom-grid {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 10px;
}

.section {
  background: white;
  padding: 4px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  flex-shrink: 0;
}

.section-40 {
  width: 40%;
  min-width: 400px;
}

.section-40 .table-header {
  min-width: auto; /* 移除固定最小宽度 */
}

.section-40 .table-body {
  min-width: auto; /* 移除固定最小宽度 */
}

.section-60 {
  width: 60%;
  min-width: 600px;
}

.section h3 {
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
  color: #1F77B4;
  font-size: 12px;
  font-weight: 600;
}

.table-container {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  min-width: 400px;
}

.table-header {
  background-color: #1F77B4 !important;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
  display: flex;
  min-width: 1150px; /* 设置最小宽度 */
}

.table-header .table-cell {
  color: white;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-sizing: border-box;
  flex: none; /* 使用固定宽度 */
}

.table-body {
  flex-grow: 1;
  min-width: 1150px; /* 设置最小宽度 */
}

.table-row {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  min-width: 100%;
}

.table-row:last-child {
  border-bottom: none;
}

.table-head {
  font-weight: bold;
}

.table-cell {
  padding: 4px 2px;
  border-right: 1px solid #e8e8e8;
  font-size: 11px;
  white-space: nowrap;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none; /* 使用固定宽度 */
  min-width: 0;
}

.table-cell:last-child {
  border-right: none;
}

.cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  box-sizing: border-box;
}

.table-row-even {
  background-color: white;
}

.table-row-odd {
  background-color: #EFF4F9;
}

.table-body .table-row:hover {
  background-color: #e6f7ff !important;
}

/* 排序相关样式 */
.sortable {
  cursor: pointer;
  user-select: none;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .quotation-form {
    min-width: 900px;
  }

  .form-group {
    grid-template-columns: 1fr;
  }

  .form-group .upload {
    grid-column: span 1;
  }

  .form-group h3 {
    grid-column: span 1;
  }
}

.section-60 .table-header {
  min-width: 1150px; /* 物料维护表格最小宽度 */
}

.section-60 .table-body {
  min-width: 1150px; /* 物料维护表格最小宽度 */
}
</style>
